<!DOCTYPE html>
<html>

<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlank.js"></script>
    <script>

        $(function () {
            var params = getParams();
            //将id设置给关注跳转
            console.log(params.id);

            $("#jumpId1").prop("href", "/mine/myFocus.html?id=" + params.id);
            $("#jumpId2").prop("href", "/mine/myFans.html?id=" + params.id);

            $.ajax({
                url: baseUrl + '/users/' + params.id,
                success: function (data) {
                    console.log(data);
                    $('.bg').renderValues(data);
                    $('.bg').css('background-image', 'url("' + data.coverImgUrl + '")')
                }
            });

            //设置查询类型;
            var type = 1;
            //设置类选择器
            var obj = $('#travels');
            queryAndBlank(baseUrl + '/users/' + getParams().id + '/all/' + type, $('#travels'));

            //查询粉丝数
            var fansNum;
            $.get(baseUrl + "/users/fans/" + params.id, function (data) {
                $("#fansNum").html(data);
                fansNum = data;
            })
            var focusNum;
            //查询当前用户关注数
            $.get(baseUrl + "/users/focus/" + params.id, function (data) {
                $("#focus").html(data);
                focusNum = data;
            })


            var currUserId;
            var beVisitedId;
            if (sessionStorage.getItem("user")) {
                currUserId = JSON.parse(sessionStorage.getItem("user")).id;
                beVisitedId = params.id;
            } else {
                //没有登录,删除关注和私信
                $(".col-group").remove();
            }

            //判断被访问的用户是否是当前用户
            if (currUserId == beVisitedId) {
                $(".col-group").remove();
                $("#travels-tab").html("我的游记");
                $("#comments-tab").html("我的点评");
                $("#wishes-tab").html("我的心愿");
            }

            $.get(baseUrl + "/users/beVisited", {beVisitedId: beVisitedId, currentId: currUserId}, function (data) {
                if (data == 1) {
                    //是被访问人的粉丝,改变样式,修改值
                    $("#followBtn").html("取消关注");
                    $("#followBtn").attr("data-fans", 0);
                } else {
                    $("#followBtn").html("关注");
                    $("#followBtn").attr("data-fans", 1);
                }
            })
            //点击按钮,取消和关注用户
            $("#followBtn").click(function () {
                //获得当前按钮的data-fans值
                var dataFans = $("#followBtn").attr("data-fans");
                if (dataFans == 1) {
                    //关注用户
                    $.post(baseUrl + "/users/addFocus", {
                        beVisitedId: beVisitedId,
                        currentId: currUserId
                    }, function (data) {
                        if (data.success) {
                            $("#followBtn").html("取消关注");
                            $("#followBtn").attr("data-fans", 0);
                            dialog("关注成功")
                            $("#fansNum").html(++fansNum)
                        } else {
                            dialog("关注失败")
                        }
                    })
                } else {
                    //取消关注用户
                    $.ajax({
                        url: baseUrl + "/users/" + beVisitedId + "/deleteFocus/" + currUserId,
                        method: "delete",
                        success: function (data) {
                            if (data.success) {
                                $("#followBtn").html("关注");
                                $("#followBtn").attr("data-fans", 1);
                                dialog("取关成功")
                                $("#fansNum").html(--fansNum);
                            } else {
                                dialog("取关失败")
                            }

                        }
                    })
                }
            })

            $('#letterBtn').click(function () {
                window.location.href = '/mine/chats.html?receiverId=' + params.id;
            });

            //查询被访问人的游记,评论,心愿数量
            $.get(baseUrl + "/users/" + getParams().id + "/allNum", function (data) {
                console.log(data);
                //将获得的数据设置到对应的标签中
                $("#travelNum").html(data[0]);
                $("#commentNum").html(data[1]);
                $("#wishNum").html(data[2]);
            });

            //给菜单栏设置监听事件
            $('.nav-link').click(function () {
                currentPage = 1;
                travels = [];
                //获得点击的data-type值
                type = $(this).data("type");
                console.log(type);
                if (type == 1) {
                    queryAndBlank(baseUrl + '/users/' + getParams().id + '/all/1', $('#travels'));
                    obj = $('#travels');
                } else if (type == 2) {
                    queryAndBlank(baseUrl + '/users/' + getParams().id + '/all/2', $('#comments'));
                    obj = $('#comments');
                } else {
                    queryAndBlank(baseUrl + '/users/' + getParams().id + '/all/3', $('#wishes'));
                    obj = $('#wishes');
                }
            });

            //监听滑动事件
            $(window).scroll(function () {
                if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 10) {
                    if (currentPage <= pages) {
                        queryAndBlank(baseUrl + '/users/' + getParams().id + '/all/' + type, obj);
                    } else {
                        if (($(window).height() + $(document).scrollTop()) >= $(document).height()) {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '客官,已经到底啦!',
                                autoClose: 1000,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }

                    }
                }
            });
        })

    </script>
</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span id="focus"></span>
                    </div>
                    <div>
                        <a id="jumpId1">
                            <span>关注</span>
                        </a>

                    </div>
                </div>

                <div class="col-2">
                    <div>
                        <span id="fansNum"></span>
                    </div>
                    <div>
                        <a id="jumpId2">
                            <span>粉丝</span>
                        </a>
                    </div>
                </div>

                <div class="col-group">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn" data-fans="0">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels" data-type="1">
                TA的游记
            </a>[<span id="travelNum"></span>]
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments" data-type="2">
                TA的点评
            </a>[<span id="commentNum"></span>]
        </li>
        <li class="nav-item">
            <a class="nav-link" id="wishes-tab" data-toggle="pill" href="#wishes" data-type="3">
                TA的旅行单
            </a>[<span id="wishNum"></span>]
        </li>
    </ul>

    <div class="container tab-content" id="pills-tabContent">

        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-fun="getHref" render-key="list.id" data-url="/travelContent.html?id=">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title">入住长隆熊猫酒店，天天都是儿童节</span>
                            <span class="span-right">
						 				<span render-html="list.likeNum">0</span> <i
                                    class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">

            <div>
                <div render-loop="list">
                    <div class="container row comment">
                        <div class="col-2 comment-head">
                            <a render-fun="getHref" render-key="list.user.id" data-url="/userProfiles.html?id=">
                                <img class="rounded-circle" render-src="list.user.headImgUrl">
                            </a>
                        </div>
                        <div class="col comment-right">
                            <p class="authorName"><span render-html="list.user.nickName">喵喵</span></p>
                            <span class="comment-star" render-key="list.starNum" render-fun="getStar">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                            </span>
                            <span class="comment-date" render-html="list.createTime">2018-07-19</span>
                            <div class="comment-content">
                                <p render-html="list.content">我觉得很好</p>
                            </div>

                            <ul class="comment-img" render-loop="list.imgUrlsArr">
                                <li>
                                    <img render-src="list.imgUrlsArr.self">
                                </li>
                            </ul>

                            <div class="d-flex icon">
                                <a render-key="list.id" render-fun="getHref"
                                   data-url="/mine/strategyComment.html?modelState=4&id=">
                                    <i class="fa  fa-commenting-o" style="margin-right: 10px"> 评论 <i
                                            render-html="list.commentNum"></i> </i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wish tab-pane fade " id="wishes">
            <dl class="list" render-loop="list">
                <div>
                    <div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="item">
                                <a render-fun="getHref" render-key="list.strategy.id"
                                   data-url="/strategyCatalogs.html?id=">
                                    <img render-src="list.strategy.coverUrl" width="50px"/>
                                </a>
                                <span render-html="list.strategy.title"></span> </br>
                                <span style="font-size: 5px;">心愿添加时间:</span>
                                <span style="font-size: 5px;" class="aui-flex-add" render-html="list.creatTime"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </dl>
        </div>
    </div>
</div>

</body>


</html>